jQuery — Select Elements and Remove Event Listeners

jQuery is a popular JavaScript for creating dynamic web pages.

In this article, we’ll look at how to using jQuery in our web apps.

:not() Selector

The :not selector selects all elements that don’t match a given selector.

For example, if we have:

<div>
  <input type="checkbox" name="a">
  <span>Mary</span>
</div>
<div>
  <input type="checkbox" name="b">
  <span>lcm</span>
</div>
<div>
  <input type="checkbox" name="c" checked="checked">
  <span>Peter</span>
</div>

Then we add a yellow background to all the checkboxes that are unchecked by writing:

$("input:not(:checked) + span").css("background-color", "yellow");

:nth-child() Selector

The :nth-child() selector lets us select all elements that are the nth-child of their parent.

For example, if we have:

<div>
  <ul>
    <li>John</li>
    <li>Karl</li>
    <li>Brandon</li>
  </ul>
</div>
<div>
  <ul>
    <li>Sam</li>
  </ul>
</div>
<div>
  <ul>
    <li>John</li>
    <li>Jane</li>
    <li>Ralph</li>
    <li>David</li>
  </ul>
</div>

Then we add a span to the name that is in the 2nd li of each ul by writing:

$("ul li:nth-child(2)").append("<span> - 2nd!</span>");

:nth-last-child() Selector

The :nth-last-child selector lets us select all elements that are the nth-child of their parent.

For example, if we have:

<div>
  <ul>
    <li>John</li>
    <li>Karl</li>
    <li>Brandon</li>
  </ul>
</div>
<div>
  <ul>
    <li>Sam</li>
  </ul>
</div>
<div>
  <ul>
    <li>John</li>
    <li>Jane</li>
    <li>Ralph</li>
    <li>David</li>
  </ul>
</div>

Then we get the 2nd last li in each ul and add a child span to it by writing:

$("ul li:nth-last-child(2)").append("<span> - 2nd to last!</span>");

:nth-last-of-type() Selector

The :nth-last-of-type selector lets get the last element of the given type.

For example, if we have:

<div>
  <ul>
    <li>John</li>
    <li>Karl</li>
    <li>Brandon</li>
  </ul>
</div>
<div>
  <ul>
    <li>Sam</li>
  </ul>
</div>
<div>
  <ul>
    <li>John</li>
    <li>Jane</li>
    <li>Ralph</li>
    <li>David</li>
  </ul>
</div>

Then we can get the 2nd last li s in the ul and add a span in them by writing:

$("ul li:nth-last-of-type(2)").append("<span> - 2nd to last!</span>");

:nth-of-type() Selector

The :nth-of-type selector selects all elements that are the nth child of their parent in relation to siblings with the same element name.

For example, if we have:

<div>
  <span>John</span>,
  <b>Kim</b>,
  <span>Adam</span>,
  <b>Rafael</b>,
  <span>Oleg</span>
</div>
<div>
  <b>Dave</b>,
  <span>Ann</span>
</div>
<div>
  <i><span>Maurice</span></i>,
  <span>Richard</span>,
  <span>Ralph</span>,
  <span>Jason</span>
</div>

Then we get the 2nd sibling span and add another span into it by writing:

$("span:nth-of-type(2)")
  .append("<span> is 2nd sibling span</span>")
  .addClass("nth");

.odd()

We can reduce the set of matched elements to the odd ones in the set with the odd selector.

For example, if we have:

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

Then we select the li ‘s with an odd index by writing:

$("li").odd().css("background-color", "red");

We add a red background to the 2nd and 4th li since the index starts at 0.

.off()

The .off() select removes an event handler.

For example, if we have:

<button id="theone">Does nothing...</button>
<button id="bind">Add Click</button>
<button id="unbind">Remove Click</button>
<div style="display:none;">Click!</div>

Then we can use the off method to remove a click handler by writing:

function flash() {
  $("div").show().fadeOut("slow");
}

$("#bind").click(function() {
  $("body")
    .on("click", "#theone", flash)
    .find("#theone")
    .text("Can Click!");
});
$("#unbind").click(function() {
  $("body")
    .off("click", "#theone", flash)
    .find("#theone")
    .text("Does nothing...");
});

The click listener for the button with ID unbind has the off method to remove the flash function as the body’s click handler.

Conclusion

We can select elements with various selectors and remove event listeners with jQuery.